<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title >首页 - 优衣库网络旗舰店</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <header>
        <div class="dl">
            尊敬的<span>xxx</span>,你好! <button class="logout">注销</button>
        </div>
        <div class="ss">
            <p class=" iconfont icon-fangdajing"></p>
            <input class="search" type="text" value="" placeholder="站内搜索">
            <ol class="search_res">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ol>
        </div>
        <ul>
            <li class="iconfont icon-dizhi-01"> 门店购买</li>
            <li class="iconfont icon-kefu"> 联系客服</li>
            <li class="iconfont icon-wodedingdan"> 站内信</li>
            <li class="iconfont icon-gouwuche"><a href="../views/car.html">购物车</a></li>
            <li class="iconfont icon-shoucang"> 收藏夹</li>
            <li class="iconfont icon-user"> 账户</li>
            <li><a href="./login.html" target="_blank">登录</a></li>
            <li><a href="./regist.html" target="_blank">注册</a></li>
        </ul>
    </header>
    <nav>
        <ul>
            <li class="li_bg"><img src="../img/LOGO.gif" alt=""> </li>
            <li>女装 WOMEN</li>
            <li>男装 MEN</li>
            <li>童装 KIDS</li>
            <li class="li_bg">婴幼儿装 BABY</li>
        </ul>
        <ol>
            <li>防诈骗公告</li>
            <li>网站购买指南</li>
            <li>关注我们</li>
            <li class="ol_end">公告区</li>
            <li class="ol_end ol_end2">店铺资料</li>
        </ol>
    </nav>
    <section>
        <!-- 大轮播图 -->
        <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://img.alicdn.com/imgextra/i1/196993935/O1CN01DYC6Df1ewHCpwslME_!!196993935.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/hero/T2_1280.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/hero/T1_1280.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/hero/T4_1280.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <div class="notice">
            <p class="title">公告</p>
            <p>▶<a href="#">优衣库捐赠2万件高功能舒爽衣物，驰援广东防疫，共启健康新生</a></p>
            <p>▶<a href="#">再次提醒：关于警惕不法分子冒充优衣库行骗的公告</a></p>
            <p>▶<a href="#">关于部分地区物流配送延迟等通知</a></p>
        </div>
        <!-- 组件部分 -->
        <div class="component">
            <ul>
                <li>
                    <p>
                        <a href="#">制作商品</a>
                    </p>
                    <ol>
                        <li><a href="#">WOMEN</a></li>
                        <li><a href="#">MEN</a></li>
                        <li><a href="#">KIDS</a></li>
                        <li><a href="#">BABY</a></li>
                    </ol>
                </li>
                <li>
                    <p>
                        <a href="#">限时特惠</a>
                    </p>
                    <ol>
                        <li><a href="#">WOMEN</a></li>
                        <li><a href="#">MEN</a></li>
                        <li><a href="#">KIDS</a></li>
                        <li><a href="#">BABY</a></li>
                    </ol>
                </li>
                <li>
                    <p>
                        <a href="#">超清精选</a>
                    </p>
                    <ol>
                        <li><a href="#">WOMEN</a></li>
                        <li><a href="#">MEN</a></li>
                        <li><a href="#">KIDS</a></li>
                        <li><a href="#">BABY</a></li>
                    </ol>
                </li>
                <li>
                    <p>
                        <a href="#">旗舰店特别企划产品</a>
                    </p>
                    <ol>
                        <li><a href="#">WOMEN</a></li>
                        <li><a href="#">MEN</a></li>
                        <li><a href="#">KIDS</a></li>
                        <li><a href="#">BABY</a></li>
                    </ol>
                </li>
            </ul>
        </div>
        <!-- 年终聚惠 -->
        <div class="welfare">
            <p>年中钜惠 惊喜福利享不停</p>
            <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/LW03_128006.jpg" alt="">
        </div>
        <!-- 视频部分 -->
        <div class="centant">
            <p>UNIQLO x Mame Kurogouchi 2021春夏系列</p>
            <video controls autoplay loop>
                <source src="https://www.uniqlo.cn/public/image/L1/2021/June/0611/Mame/video.mp4" type="video/mp4">
            </video>
        </div>
        <!-- 模特轮播图 -->
        <div class="model">
            <p class="model_one">UNIQLO x Mame Kurogouchi 2021春夏系列</p>
            <p class="model_two">美自内在,浑然天成</p>
            <div class="swiper-container" id="swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame01.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame02.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame03.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame04.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame05.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame06.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame07.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/Mame/Mame08.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
            <button>点击查看更多造型推荐</button>
        </div>
        <!-- 衣服分类 -->
        <ul class="floor">
            <li class="series">
                <p>优衣库质感男装系列</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/A_1_1280.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/A_2_1280.jpg" alt="">
                <button> <a href="../views/list.html">点击查看更多造型推荐</a> </button>
            </li>
            <li class="series">
                <p>优衣库家生活系列</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/B_1_1280.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/B_2_1280.jpg" alt="">
                <button>点击查看更多家生活系列商品</button>
            </li>
            <li class="series">
                <p>优衣库生活运动系列</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/C_1_1280.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/C_2_1280.jpg" alt="">
                <button>点击查看更多生活运动系列商品</button>
            </li>
            <li class="series">
                <p>优衣库多彩裤装系列</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/D_1_1280.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/D_2_1280.jpg" alt="">
                <button>点击查看更多多彩裤装系列</button>
            </li>
            <li class="series">
                <p>UT系列</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/UT_1_1280.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/UT_2_1280.jpg" alt="">
                <button>UT系列</button>
            </li>
            <li class="series">
                <p>合作系列</p>
                <img src="https://img.alicdn.com/imgextra/i2/196993935/O1CN01Y2hPII1ewHCu5rRSf_!!196993935.jpg" alt="">
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/hzxl_B_1280.jpg" alt="">
                <button>点击查看更多合作系列</button>
            </li>
            <li class="series">
                <p>StyleHint 衣点灵感</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/StyleHint/StyleHint.jpg" alt="">
                <button>点击查看更多衣点灵感</button>
            </li>
            <li class="series">
                <p>About LifeWear</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/May/0514/LifeWear_1280.jpg" alt="">
                <button>点击查看更多About LifeWear</button>
            </li>
            <li class="series">
                <p>TODAY'S PICK UP</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/June/0618/TPU_1280.jpg" alt="">
                <button>点击查看更多TODAY'S PICK UP</button>
            </li>
            <li class="series">
                <p>购物指南</p>
                <img src="https://www.uniqlo.cn/public/image/L1/2021/May/0528/%E8%B4%AD%E7%89%A9%E6%8C%87%E5%8D%97.jpg" alt="">
                <button>点击查看更多购物指南</button>
            </li>
        </ul>
        <div class="introduce">
            <p>关于优衣库</p>
            <ul class="bobo">
                <li>优衣库宣言</li>
                <li>优衣库抗疫行动</li>
                <li>关于警惕不法分子冒充优衣库行骗公告</li>
                <li>企业工服·企业福利·企业团购优惠</li>
                <li>免费修改裤长服务</li>
            </ul>
        </div>
        <div class="guide">
            <p class="guide_one">“身高别”穿着指南</p>
            <p class="guide_two">根据商品与身高演示不同的衣长效果。<span>购买时敬请参考</span></p>
        </div>
        <div class="top">
                <ol>
                    <!-- <li>TOP</li> -->
                    <!-- <li>年终<br>聚惠</li> -->
                    <li>男装<br>系列</li>
                    <li>生活<br>系列</li>
                    <li>运动<br>系列</li>
                    <li>裤装<br>系列</li>
                    <li>UT<br>系列</li>
                    <li>合作<br>系列</li>
                    <li>衣点<br>灵感</li>
                    <li>Life<br>Wear</li>
                    <li>PICK<br>UP</li>
                    <li>购物<br>指南</li>
                </ol>
                <button>TOP</button>
        </div>
    </section>
    <footer>
        <ul>
            <li class="logo_uniqlo"><img src="https://www.uniqlo.cn/public/Image/L1/footer/footer_logo.gif" alt=""> </li>
            <li><a href="#">店铺资料</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">访问权限</a></li>
            <li><a href="#">隐私保护</a></li>
        </ul>
        <p>迅销（中国）商贸有限公司 沪ICP备09003223号-1 沪公网安备 31010402000957号</p>
    </footer>

    <script src="../../node_modules/swiper/swiper-bundle.min.js"></script>

    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../js/index_nav.js"></script>

    <script src="../js/search.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/index.js"></script>
    <script>
    var mySwiper = new Swiper ('#swiper1', {

        autoplay : 5000,
        loop: true,
        // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            //焦点控制切换
            pagination : '.swiper-pagination',
            paginationClickable: true,
            clickable :true,

        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        /*  scrollbar: {
            el: '.swiper-scrollbar',
        },*/
        //小手
        grabCursor : true,
        })

    var mySwiper = new Swiper ('#swiper2', {

        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        slidesPerView: 4    ,
        autoplay : 5000,
        loop: true,
        // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            //焦点控制切换
            pagination : '.swiper-pagination',
            paginationClickable: true,
            clickable :true,

        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        //小手
        grabCursor : true,
        })
        for(i=0;i<mySwiper.pagination.bullets.length;i++){
        mySwiper.pagination.bullets[i].onmouseover=function(){
            this.click();
        };
        }

        setInterval("mySwiper.slidePrev()", 3000);

        mySwiper.progress;
        mySwiper.slides[2].progress;
    </script>
</body>
</html>